<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>留言</title>
<link rel="stylesheet" href="/jsp/css/font_228781_so3n7xpiffajor.css" />
<link rel="stylesheet" href="/jsp/css/style.css" />
<link rel="stylesheet" href="/jsp/css/swiper.css" />
<link rel="stylesheet" href="/jsp/css/scroll-styles.css">
<link rel="stylesheet" href="/jsp/message/css/chart-style.css" />

<script type="text/javascript" src="/jsp/js/jquery-2.2.2.min.js" ></script>
<script type="text/javascript" src="/jsp/js/common_tpl.js" ></script>
<script type="text/javascript" src="/jsp/js/banner.js"></script>
<script type="text/javascript" src="/jsp/message/js/chart.js"></script>
<script  type="text/javascript" src="/jsp/js/jqPaginator.js"></script>
<script  type="text/javascript" src="/jsp/message/js/verificationcode.js"></script>


</head>
<style>
	a{
		text-decoration:none;
	}
	.log_list_item{
		min-height: 35px;
	}
	.log_list_item .pic-link{
		width: 120px;
	}
	.ar_type{
		top: 23px;
	}
	.text-box .btn{
		margin-top: 5px;
	}
	.pagination{
		padding-left: 855px;
	}
	@media all and (max-width: 960px) {
		.log_list_item{
			min-height: 35px;
		}
		.log_list_item .pic-link{
			height: 40px;
		}
		.ar_type{
			padding-left: 130px;
		}
		.log_list_item .pic-link{
			position: absolute;
		}
		#list {
			margin: 0 0; 
			text-align: left; 
			width: 310px;
		}
		.box{
			width: 310px;
		}
		.comment-box .comment-content{
			width: 290px;
		}
		.content {
		 	width: 370px;
		 }
		.text-box .comment{
			width: 360px;
		}
		.content {
			width: 370px;
		}
		.comment-box .comment-content .comment-praise{
			right: -80px;
		}
		.pagination{
			padding-left: 0px;
		}
		#page{
			float: right;
		}
		#list1 {
			margin: 0 0;
			text-align: left;
			width: 365px;
		}
		.input-val{
			width: 70%;
		}
	}
</style>
<body>
<!--导航-->
<div class="nav">
    <div class="container">
        <a href="javascript:navClick();" class="icon-menu" id="open-menu">
            <i class="icon-menu-item"></i>
            <i class="icon-menu-item"></i>
            <i class="icon-menu-item"></i>
        </a>
        <div class="logo">
            <a href="/index.html">
                <img src="/jsp/images/logo.png"  style="float: left;height: 70px;" />
            </a>
        </div>
        <ul class="menu" id="menu">
            <li class="menu-item">
                <a href="/index.html">首页</a>
            </li>
            <li class="menu-item">
                <a href="/main/lately.html">最近更新</a>
            </li>
            <li class="menu-item">
                <a href="/main/blog.html">博客文章</a>
            </li>
            <li class="menu-item" >
                <a href="/main/type.html">博客分类</a>
            </li>
            <li class="menu-item">
                <a href="#">音乐</a>
            </li>
            <li class="menu-item active">
                <a href="/message/list.html">留言</a>
            </li>
        </ul>
    </div>
</div>
<!--导航 ／-->
	<marquee>因本博客不提供用户登录信息，用户的评论数据昵称由随机数据生成！</marquee>
    <div id="list" class="list_content">
<%--     	<c:forEach var="t" items="${list }">
    		<div class="box clearfix" >
    			<div class="content">
    				<div class="main">
    					 <p class="txt">
    					 	<span class="user">${t.name }：</span>${t.text }
    					 </p>
    				</div>
	                <div class="info clearfix">
	                    <span class="time">${t.mess_time }</span>
	                    <a class="praise" href="javascript:;" id="${t.id }">赞</a>
	                </div>
    				<div class="praises-total" total="${t.click_num }" style="display: block;">${t.click_num }个人觉得很赞</div>
    				
    				<c:choose>
    					<c:when test="${not empty t.coms}">
		    				<c:forEach var="t1" items="${t.coms }">
				                <div class="comment-list">
				                    <div class="comment-box clearfix" user="self">
				                        <div class="comment-content">
				                            <p class="comment-text"><span class="user">${t1.name }：</span>${t1.text }</p>
				                            <p class="comment-time">
				                                ${t1.mess_time }
				                                <a href="javascript:;" class="comment-praise" total="${t1.click_num }" my="0" style="display: inline-block">${t1.click_num } 赞</a>
				                            </p>
				                        </div>
				                    </div>
				                </div>
	    					</c:forEach>
    					</c:when>
    					<c:otherwise>
    						 <div class="comment-list">
    						 	
    						 </div>
    					</c:otherwise>
    				</c:choose>

	                <div class="text-box">
	                    <textarea class="comment" autocomplete="off">评论…</textarea>
	                    <button class="btn ">回 复</button>
	                    <span class="word"><span class="length">0</span>/140</span>
	                </div>
    			</div>
    		</div>
    	
    	</c:forEach> --%>
    </div>
    <div id="list1">
    	<form action="" id="form" method="post">
		<ul>
			<li>
				<input type="text" class="form-control" id="name" name="name"  placeholder="请输入昵称" style="width: 100%" />
			</li>
			<li>
				<textarea class=" form-control"  name="text" id="text" placeholder="请输入留言信息" style="width: 100%; height:100px;"></textarea>
			</li>
			<li>
			<li>
				<input type="text" class="form-control input-val" style="width: 85%;float:left;height: 30px;"  value="" placeholder="请输入验证码"  />
				<canvas id="canvas" width="100" height="43"></canvas>
			</li>
			<li>
				<button type="button" style="margin-top: 5px;float: right" class="col-xs-12 btn btn-danger save">提交信息</button>
			</li>
		</ul>
	</form>
    
    </div>
    
    
        <!--分页-->
        <div id="page" class="pagination">这是分页</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
	var totalPages = "${pages.totalPages}";
	var pageNum = "${pages.pageNum}";
	//总页数
	$('#page').jqPaginator({
	    totalPages: parseInt(totalPages),
	    visiblePages: 5,
	    currentPage: parseInt(pageNum),
	    first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
	    prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
	    next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
	    last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
	    page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
	    onPageChange: function (num) {
	    	$.get("/message/listpage.action?page=" + num,function(data){
 	    		var html = "";
	    		$.each(data.result.item,function(m,n){
	    			html+='<div class="box clearfix">';
	    			html+='<div class="content">';
	    			html+='<div class="main">';
	    			html+='<p class="txt"> <span class="user">'+n.name+'：</span>'+n.text+'</p>';
	    			html+='</div>';
	    			html+='<div class="info clearfix"><span class="time">'+n.mess_time+'</span><a class="praise" href="javascript:clickZan('+n.id+');" id="liuyan'+n.id+'">赞</a></div>';
	    			html+='<div class="praises-total" total="'+n.click_num+'"  id="total'+n.id+'" style="display: block;">'+n.click_num+'个人觉得很赞</div>';
	    			if(n.coms.length >0){
	    				$.each(n.coms,function(s,k){
	    					html+='<div class="comment-list commentlist'+n.id+'">';
		    				html+='<div class="comment-box clearfix" user="self"> ';
		    				html+='<div class="comment-content">';
		    				html+='<p class="comment-text"><span class="user">'+k.name+'：</span>'+k.text+'</p>';
		    				html+='<p class="comment-time">'+k.mess_time+'<a href="javascript:pinglun2('+n.id+');" class="comment-praise" total="'+k.click_num+'" id="zan'+n.id+'ping '+k.id+'" >'+k.click_num+' 赞</a></p>';
		    				html+='</div>';
		    				html+='</div>';
		    				html+='</div>';
	    				});
	    			}else{
	    				html+='<div class="comment-list commentlist1'+n.id+'">';
	    				html+='</div>';
	    			}
	    			
	    			html+='<div class="text-box">';
	    			html+='<textarea class="comment" onclick="pingLun('+n.id+')" autocomplete="off" id="pinglun'+n.id+'">评论…</textarea><button class="btn" onclick="tijiao('+n.id+')">评论</button><span class="word"><span class="length">0</span>/140</span></div>';
	    			html+='</div>';
	    			html+='</div>';
	    			
	    			
	    			
	    		});
	    		$(".list_content").html(html);
	    	});
	    	
	    }
	});
	
	
});

//留言赞
function clickZan(id){
	var el = document.getElementById('liuyan'+id);
	var eltotal = document.getElementById('total'+id);
	var txt = el.innerHTML;
	var oldTotal = eltotal.getAttribute('total');
	var newTotal = 0;
    if (txt == '赞') {
        newTotal = parseInt(oldTotal) + 1;
        eltotal.setAttribute('total', newTotal);
    	eltotal.innerHTML = newTotal +'个人觉得很赞';
        el.innerHTML = '取消赞';
    }
    else {
        newTotal = oldTotal - 1;
        eltotal.setAttribute('total', newTotal);
        eltotal.innerHTML = newTotal +'个人觉得很赞';
        el.innerHTML = '赞';
    }
    
    $.post("/message/praise.action",{"id": id,"click_num":newTotal},function(data){
    	if(data == "success"){
    		console.log("操作成功！");
    	}else{
    		console.log("操作失败！");
    	}
    });
}

//评论输入框清空
function pingLun(id){
	var el = document.getElementById('pinglun'+id);
	var value = el.value;
	el.value = el.value == '评论…' ? '' : el.value;
}
//评论提交
function tijiao(id) {
	var text = document.getElementById('pinglun'+id).value;
	if(text != "" && text != "评论…"){
	    var commentList = "";
	    var commentList1 = document.getElementsByClassName('commentlist' +id)[1];
	    if(typeof(commentList1)=="undefined" || commentList1 == null){
	    	commentList = document.getElementsByClassName('commentlist1'+id)[0];
	    }else{
	    	commentList = commentList1;
	    }
	    var textarea = document.getElementById('pinglun'+id);
	    var commentBox = document.createElement('div');
	    commentBox.className = 'comment-box clearfix';
	    commentBox.setAttribute('user', 'self');
	    
	    var commentdate = formateDate(new Date());
	    
	    var commentname = Math.random().toString(36).substr(2);
	    
	    commentBox.innerHTML =
	            '<div class="comment-content">' +
	            '<p class="comment-text"><span class="user">'+commentname+'：</span>' + textarea.value + '</p>' +
	            '<p class="comment-time">' +
	            commentdate +
	            '</p>' +
	            '</div>'
	    commentList.appendChild(commentBox);
	    $.post("/message/addcoms.action",{"name":commentname,"text":textarea.value,"mess_time":commentdate,"m_id":id},function(data){
	    	if(data == "success"){
	    		console.log("操作成功！");
	    	}else{
	    		console.log("操作失败！");
	    	}
	    });      
	    textarea.value = '评论…';
	}else{
		alert("请输入评论内容！");
	}
}

//格式化日期
function formateDate(date) {
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    var d = date.getDate();
    var h = date.getHours();
    var mi = date.getMinutes();
    m = m > 9 ? m : '0' + m;
    return y + '-' + m + '-' + d + ' ' + h + ':' + mi;
}
function navClick(){
	var text = $(".nav .menu").css("display");
	
	if(text == "none"){
		$(".nav .menu").css("display","block");
	}else{
		$(".nav .menu").css("display","none");
	}
}

</script>
<script type="text/javascript">
$(function(){
	var show_num = [];
	draw(show_num);

	$("#canvas").on('click',function(){
		draw(show_num);
	})
	$(".save").click(function(){
		var val = $(".input-val").val().toLowerCase();
		var num = show_num.join("");
		
		var name = $("#name").val();
		var tel = $("#tel").val();
		var text = $("#text").val();
		if(name == ''){
			alert('请输入昵称！');
		}else if(text == ''){
			alert('请输入留言信息');
		}else{
			if(val==''){
				alert('请输入验证码！');
			}else if(val == num){
				$.post("/message/liuyan.action",$("#form").serialize(),function(data){
					window.location.href="/message/list.html";
				});
				draw(show_num);
			}else{
				alert('验证码错误！请重新输入！');
				$(".input-val").val('');
				draw(show_num);
			}
		}
	});
	
});

</script>  
</html>